<template>
    <div class="History_Root">
        <!-- <Manuscript v-for="item in dynamicsData" :key="item.id" :id="item.id" :title="item.name"
            :videoPoster="item.posterSource" :videoUrl="item.videoSource" :date="item.releaseTime" :author="item.uid"
            :subscribe="item.details" :partition="item.type" :like="item.like" :status="item.status" :history="true" @PlayerVideo="VideoPlay"
            @OffShelf="OffShelfUE" @Reject="RejectUE">
        </Manuscript> -->
        <div class="card_grid" v-if="!emptyShow">
            <ManuScriptCard v-for="item in dynamicsData" :key="item.id" :id="item.id" :title="item.name"
                :videoPoster="item.posterSource" :videoUrl="item.videoSource" :date="item.createTime" :author="item.nickname"
                :subscribe="item.details" :partition="item.type" history="true" :status="item.status" :like="item.like"
                 @PlayerVideo="VideoPlay"@Accept="AcceptUE" @Reject="RejectUE">
            </ManuScriptCard>
        </div>
        <el-empty :image-size="200" description="历史为空" v-else/>
    </div>
    <div class="Bottom"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import Manuscript from '../../components/Manuscript.vue';
import MyVideo from '../../components/MyVideo.vue';
import { GetAllWorkInfoList, OffShelfWork, AuditWork } from '../../Net/netApi.js'
import { CustomerConfirm, CustomerMessage } from '../../Util/Confirm.js';
import ManuScriptCard from '../../components/ManuScriptCard.vue';
import { UserVideoStore } from '../../stores/videoControl.js'


let emptyShow = ref(true)
let dynamicsData = ref([])
const videoStore=UserVideoStore()

onMounted(() => {
    GetWorkList()
})

//TODO:如果出现数据异常，请删除这里
watch(dynamicsData, (newValue, oldValue) => {
    if (newValue != oldValue) {
        dynamicsData.value = newValue
    }
})

const GetWorkList = async () => {
    let res = await GetAllWorkInfoList()
    dynamicsData.value = []
    if (res.code == '200') {
        dynamicsData.value = res.data
    }
    if (dynamicsData.value.length > 0) {
        emptyShow.value = false
    }
}

const VideoPlay = (source) => {
    videoStore.PlayVideo(source)
}

const OffShelfUE = (id) => {
    CustomerConfirm('确定要下架该视频吗', '警告', '确定', '取消', 'warning',
        () => OffShelfTrend(id), () => CustomerMessage('已取消该操作', 'warning'))
}

const RejectUE = (id) => {
    CustomerConfirm('确定再次驳回稿件吗', '提示', '确定', '取消', 'warning',
        () => RejectManuScript(id), () => CustomerMessage('已取消该操作', 'warning'))
}

const OffShelfTrend = async (id) => {
    let res = await OffShelfWork(id)
    if (res.code == '200') {
        CustomerMessage('视频下架成功', 'success')
        //刷新一次列表
        GetWorkList()
    }
}

const RejectManuScript = async (id) => {
    let res = await AuditWork(id, 2)
    if (res.code == '200') {
        CustomerMessage('稿件驳回成功', 'success', true)
        GetWorkList()
    }
}


</script>

<style lang='less' scoped>
.History_Root {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;

    .card_grid {
        width: 100%;
        height: 100%;
        padding: 0.5rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(calc(15rem), 1fr));
        grid-row-gap: 1rem;
        grid-column-gap: 0.1rem;
        // TODO:布局出错请找这里
        grid-auto-flow: dense;
    }
}
</style>